@extends('backend.layouts.master')

@section('after-styles-end')
    {!! Html::style('css/plugin/percentagebar/style_percentage_bar.css') !!}
    {!! Html::style('css/backend/plugin/backend.css') !!}

@stop

@section('content')
    <div class="row">
        <div class="btn-group">
            <button type="button" class="btn btn-default" onclick="moveSubjectToBacklog()">
                移入备选库
            </button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">
                按照总浏览数排列
            </button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">
                按照总投票数排列
            </button>
        </div>
    </div>
    <div class="row">
        {!! $votes->render() !!}
        @foreach ($votes as $vote)
            <div class="panel panel-default" id="{{ $vote->id }}_row">
                <div class="panel-heading">
                    <div class="fa subject-title"
                         ondblclick="editSubjectTitle('{{ $vote->id }}')"
                         style="font-size: larger;font-weight: bold;">
                        <input type="checkbox"  onclick="selectSubject(this)" id="{{ $vote->id }}_title"> {{ $vote->title }}
                    </div>
                    <div class="fa edit-title"
                         style="font-size: larger;font-weight: bold;display:none">
                        <input type="text" value="{{$vote->title}}" style="height:100%;width:100%"/>
                    </div>
                    <div>
                        <div style="display: inline;">浏览数:{{ $vote->views }}</div>
                        <div style="display: inline;">投票数:{{ $vote->total }}</div>
                        @if ($vote->views > 0)
                            <div style="display: inline;">投票/浏览:{{ round($vote->total / $vote->views, 2)}}</div>
                        @endif

                        <button type="button" class="btn btn-default" onclick="addChoice('{{ $vote->id }}')">
                            添加选项
                        </button>
                    </div>
                </div>

                <div class="panel-body">
                    @if ($vote->choices != null)
                        @if ($index = 0) @endif
                        @foreach ($vote->choices as $choice)
                            <div class="skillbar clearfix choice-root"
                                 id="{{ $vote->id }}_{{$index}}"
                                 subject-id="{{ $vote->id }}"
                                 votes="{{ $choice->votes }}"
                                 ondblclick="editChoice(this)"
                                 data-percent="{{ $vote->total > 0 ? round($choice->votes * 100/ $vote->total) : 0}}%">
                                <div class="skillbar-title choice-title">
                                    <span>{{$choice->title}}</span>
                                </div>
                                <div class="skillbar-title choice-title-edit">
                                    <input type="text" value="{{$choice->title}}"
                                           style="height:100%;width:100%"/>
                                </div>
                                <div class="skillbar-bar choice-progress"></div>
                                <div class="skill-bar-percent choice-percent">{{$vote->total > 0 ? round($choice->votes * 100/ $vote->total) : 0}}
                                    %
                                </div>
                                <div class="delete-choice btn-default" onclick="deleteChoice('{{ $vote->id }}', this)">X</div>
                            </div> <!-- End Skill Bar -->
                            @if ($index++) @endif
                        @endforeach
                    @endif
                    <div class="btn-group edit-btn-group" style="display: none">
                        <button type="button" class="btn btn-default"
                                onclick="saveChanges('{{ $vote->id }}')">
                            保存
                        </button>
                        <button type="button" class="btn btn-default"
                                onclick="cancelEditSubject('{{ $vote->id }}')">
                            取消
                        </button>
                        <button type="button" class="btn btn-default" onclick="resetSubject('{{ $vote->id }}')">
                            恢复到原始数据
                        </button>
                    </div>
                </div>
            </div><!-- panel -->
        @endforeach
        {!! $votes->render() !!}

    </div><!--row-->

@endsection

@section('after-scripts-end')
    <script>
        var selectedSubjects = [];
        $(document).ready(function () {
            $('.skillbar').each(function () {
                $(this).find('.skillbar-bar').animate({
                    width: $(this).attr('data-percent')
                }, 1000);
            });
        });
        function selectSubject(checkBox) {
            var id = checkBox.id.replace("_title", "");
            var selectedIndex = selectedSubjects.indexOf(id);
            if (checkBox.checked) {
                if (selectedIndex < 0) {
                    selectedSubjects.push(id);
                }
            } else if (selectedIndex >= 0) {
                selectedSubjects.splice(selectedIndex, 1);
            }
        }
        function subjectRoot(subjectId) {
            return $("#" + subjectId + "_row");
        }

        function showEditBtnGroup(subjectId) {
            subjectRoot(subjectId).find(".edit-btn-group").show();
        }

        function hideEditBtnGroup(subjectId) {
            subjectRoot(subjectId).find(".edit-btn-group").hide();
        }

        function editSubjectTitle(subjectId) {
            showEditBtnGroup(subjectId);
            subjectRoot(subjectId)
                    .find(".edit-title")
                    .show()
                    .width($("#" + subjectId + "_row .subject-title").hide().width());
        }

        function cancelEditSubjectTitle(subjectId) {
            subjectRoot(subjectId)
                    .find(".edit-title")
                    .hide()
                    .find(":input")
                    .val($.trim(subjectRoot(subjectId)
                            .find(".subject-title")
                            .show()
                            .text()));
        }

        function addChoice(subjectId) {
            showEditBtnGroup(subjectId);
            var root = subjectRoot(subjectId);
            var choiceItem = root.find(".skillbar").last().clone();
            var choiceId = subjectId + "_" + root.find(".skillbar").size();
            choiceItem.attr("id", choiceId);
            choiceItem.attr("subject-id", subjectId);
            choiceItem.attr("votes", 0);
            choiceItem.addClass("choice-new");
            root.find(".edit-btn-group").before(choiceItem);
            editChoice(choiceItem);
        }
        
        function deleteChoice(subjectId, ele) {
            showEditBtnGroup(subjectId);
            $(ele).parent().addClass("choice-deleted");
        }

        function editChoice(ele) {
            showEditBtnGroup($(ele).attr("subject-id"));
            var choiceId = $(ele).attr("id");
            var choiceTitle = $(ele).find(".choice-title");
            var choiceInput = $(ele).find(".choice-title-edit");
            choiceTitle.hide();
            choiceInput.show();
            choiceInput.width(choiceTitle.width());
            $(ele).addClass("choice-editing");
        }

        function saveChanges(subjectId) {
            $(".choice-editing").each(function () {
                $(this).removeClass("choice-editing");
            });
            var root = subjectRoot(subjectId);
            var subjectTitle = $.trim(root.find(".edit-title")
                    .find(":input")
                    .val());
            var choices = [];
            root.find(".skillbar:not(.choice-deleted)").each(function (index, ele) {
                var choiceTitle = $(this).find(".choice-title-edit :input").val();
                choices.push({
                    title: $.trim(choiceTitle),
                    order: index + 1,
                    votes: $(this).attr("votes")
                });
            });
            $.ajax({
                url: "{{ URL::to('admin/update-subject') }}",
                type: "post",
                traditional: true,
                data: {
                    id: subjectId,
                    title: subjectTitle,
                    choices: JSON.stringify(choices)
                },
                dataType: "JSON",
                success: function () {
                    hideEditBtnGroup(subjectId);
                    commitClientChanges(subjectId);
                    alert("操作成功");
                },
                error: function (xhr, type) {
                    alert('操作失败')
                }
            });
        }

        function commitClientChanges(subjectId) {
            var root = subjectRoot(subjectId);
            root.find(".skillbar").each(function (index, ele) {
                $(ele).find(".choice-title")
                        .show()
                        .find("span")
                        .text($(ele).find(".choice-title-edit")
                                .hide()
                                .find(":input")
                                .val());
            });
            var checkBox = root.find(".subject-title :input");
            root.find(".subject-title")
                    .show()
                    .html("")
                    .append(checkBox)
                    .append(" ")
                    .append(root.find(".edit-title")
                            .hide()
                            .find(":input")
                            .val());
        }

        function resetSubject(subjectId) {
            $.ajax({
                url: "{{ URL::to('admin/reset-votes') }}",
                type: "post",
                traditional: true,
                data: {ids: JSON.stringify([subjectId])},
                dataType: "JSON",
                success: function () {
                    window.location.reload();
                },
                error: function (xhr, type) {
                    alert('操作失败')
                }
            });
        }

        function moveSubjectToBacklog() {
            $.ajax({
                url: "{{ URL::to('admin/move-votes-to-backlog') }}",
                type: "post",
                traditional: true,
                data: {ids: JSON.stringify(selectedSubjects)},
                dataType: "JSON",
                success: function () {
                    selectedSubjects = [];
                    $(":checkbox").attr("checked", false);
                    window.location.reload();
                },
                error: function (xhr, type) {
                    alert('操作失败')
                }
            });
        }

        function cancelEditSubject(subjectId) {
            $(".choice-editing").each(function () {
                $(this).removeClass("choice-editing");
            });
            $(".choice-new").each(function () {
                $(this).remove();
            });
            subjectRoot(subjectId).find(".choice-deleted").each(function () {
                $(this).removeClass("choice-deleted");
            });
            hideEditBtnGroup(subjectId);
            cancelEditSubjectTitle(subjectId);
            subjectRoot(subjectId).find(".skillbar").each(function (index, ele) {
                var choiceTitle = $(ele).find(".choice-title");
                var choiceInput = $(ele).find(".choice-title-edit");
                choiceTitle.show();
                choiceInput.hide();
                choiceInput.find(":input").val($.trim(choiceTitle.text()));
            });
        }
    </script>
@stop